<template>
  <h1>setup 函数</h1>
  <div>
    <ul>
      <li>{{ count }}</li>
      <li>
        <button @click="add">add</button>
      </li>
      <li></li>
      <li></li>
      <li></li>
    </ul>
  </div>
</template>

<!-- setup语法糖（推荐）: 在 script 标签加 setup属性 -->
<script setup>
// 注意：这个普通的 js 变量，不是响应变量
let count = 1
const add = () => {
  count += 1
  console.log(count)
}
</script>

<!-- setup 函数完整写法 -->
<!-- <script>
export default {
  data() {
    return {
      msg: 'vue2'
    }
  },
  beforeCreate() {
    console.log('vue2:beforeCreate')
  },
  setup() {
    /**
     * setup 函数重点：
     * 1. 在这里写 vue3的代码
     * 2. setup 函数中定义的变量和方法，必须返回后，才能在模板中使用
     * 3. setup函数比beforeCreate先执行
     */
    console.log('vue3:setup')
    let count = 1
    const add = () => {
      count += 1
    }
    // setup 函数中定义的变量和方法，必须返回后，才能在模板中使用
    return { count, add }
  }
}
</script> -->

<style lang="scss" scoped></style>
